<!--
 * @Author: g05047
 * @Date: 2021-05-31 17:57:35
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-07-13 10:32:37
 * @Description: file content
-->
<template>
  <!-- 添加/编辑登录账号Modal -->
  <a-modal :visible="accountModal" :title="modalType + '登录账号'" @ok="handleOk" @cancel="handleCancel">
    <a-form-model ref="account" :model="accountState" :rules="accountRules" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
      <a-form-model-item label="企业名称" prop="name">
        <a-select show-search v-model="accountState.name" @search="onSearchCompany" placeholder="请输入企业名称">
          <a-select-option v-for="company in companyLists" :key="company.name + '--' + company.id">
            {{ company.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="联系人" prop="contact">
        <a-input v-model="accountState.contact" placeholder="请输入联系人" allow-clear />
      </a-form-model-item>
      <a-form-model-item label="手机号" prop="mobile">
        <a-input v-model="accountState.mobile" placeholder="请输入手机号" allow-clear />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { companyList } from '@/services/account.js';
import { regTest } from '@/utils/util';
export default {
  name: 'addMemberModal',
  props: {
    accountModal: {
      type: Boolean,
      default: false,
    },
    nowAccount: Object,
    modalType: String,
  },
  watch: {
    accountModal: {
      handler (newValue) {
        if (newValue && this.modalType == '编辑') {
          this.accountState.name = this.nowAccount.companyName + '--' + this.nowAccount.companyId;
          this.accountState.contact = this.nowAccount.contacts;
          this.accountState.mobile = this.nowAccount.mobile;
        }
      },
    },
  },
  data () {
    return {
      accountState: {
        name: undefined,
        contact: '',
        mobile: '',
      },
      accountRules: {
        name: [{ required: true, message: '请选择企业！', trigger: 'change' }],
        contact: [{ required: true, message: '联系人不允许为空！', trigger: 'blur' }],
        mobile: [{ required: true, message: '手机号不允许为空！', trigger: 'blur' }],
      },
      companyLists: [],
    };
  },
  methods: {
    handleOk () {
      this.$refs.account.validate(valid => {
        if (valid) {
          if (!regTest.mobileReg(this.accountState.mobile)) {
            this.$message.warning('手机号格式不正确！');
            return;
          }
          this.$emit('cancelModal', {
            success: 'ok',
            data: this.accountState,
          });
        } else {
          return false;
        }
      });
    },
    handleCancel () {
      this.$refs.account.resetFields()
      this.$emit('cancelModal', {
        success: 'cancel',
        data: '',
      });
    },
    /**
     * @description: 企业下拉列表
     * @param {*}
     * @return {*}
     */
    companyList () {
      companyList().then(res => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.companyLists = data.content;
        } else {
          this.$message.error(msg);
        }
      });
    },
    onSearchCompany (value) {
      if (value.length >= 2) {
        this.companyList({ name: value });
      }
    },
  },
};
</script>

<style></style>
